import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Image.asset(
            "assets/images/login_bg.png",
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            fit: BoxFit.cover,
          ),
          Positioned(
            child: Column(
              children: [
                InkWell(
                  child: loginMethod("登陆", Colors.red[400],
                      MediaQuery.of(context).size.width * 0.8),
                  onTap: () {},
                ),
                SizedBox(height: 30),
                InkWell(
                  child: loginMethod("注册", Colors.grey[400],
                      MediaQuery.of(context).size.width * 0.8),
                  onTap: () {},
                ),
                // SizedBox(height: 90),
              ],
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
            ),
            bottom: MediaQuery.of(context).padding.bottom + 260,
            left: 44,
          ),
          Positioned(
            child: otherMethod(),
            bottom: MediaQuery.of(context).padding.bottom + 60,
            left:  MediaQuery.of(context).size.width*0.25,
          )
        ],
      ),
    );
  }
}

Widget loginMethod(String method, Color colors, double width) {
  const double height = 60;
  return ClipRRect(
    borderRadius: BorderRadius.circular(height),
    child: Container(
      child: Text(
        method,
        style: TextStyle(
          color: Colors.white,
          fontSize: 30,
        ),
      ),
      color: colors,
      width: width,
      height: height,
      alignment: Alignment.center,
    ),
  );
}

Widget otherMethod() {
  return Column(
    children: [
      Text(
        "用其他方式登陆",
        style: TextStyle(color: Colors.red[400], fontSize: 18),
      ),
      SizedBox(height: 20,),
      Row(
        children: [
          Image.asset(
            "assets/icons/tabBar_active_center.png",
            width: 50,
          ),
          SizedBox(width: 20),
          Image.asset(
            "assets/icons/tabBar_active_center.png",
            width: 50,
          ),
          SizedBox(width: 20),
          Image.asset(
            "assets/icons/tabBar_active_center.png",
            width: 50,
          ),
        ],
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.center,
        verticalDirection: VerticalDirection.down,
      )
    ],
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    mainAxisSize: MainAxisSize.max,
    crossAxisAlignment: CrossAxisAlignment.center,
  );
}
